<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="ism" uri="http://www.baseproj.org/rd/html"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<ism:link rel="stylesheet" type="text/css" href="../skins/main.css" debug="false" />
</head>
<body class="popUp caseImg chooseTO">
    <!-- 素材列表 -->
    <div class="fixedH">
        <ul class="fL" id="materialContent">
        </ul>
    </div>
    <div class="bottomtoolbar">
        <input class="inputButton" type="button" onclick="selectMaterial()" value="确定"> <input class="inputButton subButton" type="button" onclick="popdown('chooseMaterial');" value="取消">
    </div>
</body>
<ism:script type="text/javascript" src="../js/jquery.min.js"></ism:script>
<ism:script type="text/javascript" src="../js/common.js" debug="false"></ism:script>
<ism:script type="text/javascript" src="../js/popSelect.js"></ism:script>
<ism:script type="text/javascript" src="../js/eye_core.js" debug="false"></ism:script>
<script type="text/javascript">
    var material = {};
    function selectMaterial() {
        if (material.code != null) {
            top.selectMaterialHook(material);
        } else {
            return;
        }
        popdown('chooseMaterial');
    }

    $(function() {
        //遍历各个素材,拼装显示
        var liHtml = "";
        <s:iterator value="materialList"> //通过s标签遍历
        liHtml += "<li ondblclick='selectMaterial()' style='width: 192px; height: 120px; text-align: center; vertical-align: middle;'>";
        liHtml += "<img style='width:<s:property value='width' />px;height:<s:property value='height' />px' ";

        liHtml += "src='image_show.action?projectCode=<s:property value='projectCode' />&schemeCode=<s:property value='schemeCode' />&materialCode=<s:property value='code' />&materialSuffix=";

        if (<s:property value='type' /> == MaterialTypeEnum.IMAGE) { //素材类型是图片
            liHtml += "<s:property value='suffix' />' />";
        } else if (<s:property value='type' /> == MaterialTypeEnum.VIDEO) { //素材类型是视频
            liHtml += VIDEO_POSTER_SUFFIX + "' />"; //在接口定义中默认格式是jpg
        } else if (<s:property value='type' /> == MaterialTypeEnum.RECORD) { //素材类型是录制
            liHtml += "<s:property value='suffix' />' />";
        }

        liHtml += "<input type='hidden' value='<s:property value='code' />' /><input type='hidden' value='<s:property value='type' />' /><em><s:property value='name' /> </em> </li>";
        </s:iterator>

        $("#materialContent").html(liHtml); //将素材内容显示出来

        // 选择测评对象页面li选中效果
        $(".chooseTO li").click(function() {
            $(".chooseTO .on").not($(this)).removeClass("on");
            $(this).addClass("on");
        });

        $(".fixedH").find("li").click(function() {
            material = {
                code : $(this).find("input").eq(0).val(),
                type : $(this).find("input").eq(1).val()
            };
        });

        $(".fixedH").find("img").each(function() {
            var imgWidth = $(this).width();
            var imgHeight = $(this).height();
            var rate = calcRate(imgWidth, imgHeight, 192, 100); //这里取100，是为了显示<em>标签内容

            $(this).width(imgWidth * rate);
            $(this).height(imgHeight * rate);
            $(this).css({
                "position" : "relative",
                "left" : "auto",
                "top" : (100 - $(this).height()) / 2
            });
        });
    });
</script>
</html>